<template>
	<view class="center">
		<xbd-page-card>
			<template>
				<view>
					<view class="number">
						<view>近半年任务完成数量</view>
						<view>{{total}}<text>个</text> </view>
					</view>
					<view class="chart">
						<chart-line-area :chart-data="trafficAnomaly"></chart-line-area>
					</view>
					<view class="number">
						<view>近半年任务完成率</view>
						<view>{{ Math.round(rate*100) }}<text>%</text> </view>
					</view>
					<xbd-zwnz v-if="(securityAlarm.data[0].num =='0' && securityAlarm.data[1].num=='0')"></xbd-zwnz>
					<view v-else class="chart2">
						<chart-ring v-if="hackReset" :chart-data="securityAlarm"></chart-ring>
					</view>
				</view>
			</template>
		</xbd-page-card>

		<xbd-page-card>
			<template>
				<xbd-image-title title="正在进行" :image="require('@/static/image/supervision/proceed.png')">
				</xbd-image-title>

				<uni-list :border="false">
					<view class="section-card" @click="open(item._id,item.task_name,item.state,'ing')"
						v-for="item in waitList" :key='item._id'>
						<view class="left">
							<view class="name">
								{{item.task_name}}
							</view>
							<view class="left_text" v-if="item.time">
								<text style="margin-right: 30rpx;">
									完成
								</text>
								<text>
									{{item.time | timeFormat('YYYY-MM-DD HH:mm')}}
								</text>
							</view>
							<view class="left_text" v-else>
								<text style="margin-right: 30rpx;">
									截止
								</text>
								<text>
									{{item.end_time | timeFormat('YYYY-MM-DD HH:mm')}}
								</text>
							</view>
						</view>
						
					</view>
					<xbd-null-list v-if="!waitList.length"></xbd-null-list>
				</uni-list>
			</template>
		</xbd-page-card>
		<xbd-page-card>
			<template>
				<xbd-image-title title="已结束" :image="require('@/static/image/supervision/end.png')">
				</xbd-image-title>
				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholderStyle="font-size:30rpx"
					placeholder="搜索内容" @iconClick="iconClick"></uni-easyinput>
				<uni-section>
					<uni-list :border="false">
						<view class="section-card" @click="open(item._id,item.task_name,item.state,'end')"
							v-for="item in showList" :key='item._id'>
							<view class="left">
								<view class="name">
									{{item.task_name}}
								</view>
								<view class="left_text" v-if="item.time">
									<text style="margin-right: 30rpx;">
										完成
									</text>
									<text>
										{{item.time | timeFormat('YYYY-MM-DD HH:mm')}}
									</text>
								</view>
								<view class="left_text" v-else>
									<text style="margin-right: 30rpx;">
										截止
									</text>
									<text>
										{{item.end_time | timeFormat('YYYY-MM-DD HH:mm')}}
									</text>
								</view>
							</view>
						</view>
						<xbd-null-list v-if="!showList.length"></xbd-null-list>
						<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
						</xbd-loading-more>

					</uni-list>

				</uni-section>
			</template>
		</xbd-page-card>
		<!-- 查看我的任务列表破 -->
	</view>
</template>

<script>
	import {
		Mission
	} from '@/api/index.js';
	export default {
		data() {
			return {
				securityAlarm: {
					unit: '次',
					data: [{
							grade: "已完成",
							num: 0,
							const: 'const'
						},
						{
							grade: "未完成",
							num: 0,
							const: 'const'
						}
					]
				},
				rate: '',
				total: '',
				hackReset: true,
				// popupShow: false,
				statusNum: 0,
				isLoadMore: false,
				show: false,
				value: '',
				showList: [],
				waitList: [],
				show: false,
				hackReset: true,
				info: {
					page: 1,
					perpage: 10000,
					type: 'wait',
				},
				endInfo: {
					page: 1,
					perpage: 10,
					type: 'end',
					keyword: ''

				},
				trafficAnomaly: {
					name: '任务',
					color: '#48BC7C',
					unit: '个',
					x: 'x',
					y: 'y',
					data: []
				}
			};
		},
		methods: {
			// 加载更多
			loadmore() {
				this.endInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Mission.getTaskList(this.endInfo)
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.endInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.endInfo.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.endInfo.page--;
				}
			},
			iconClick() {
				this.endInfo.page = 1
				this.endInfo.keyword = this.value
				this.showList = []
				this.getEndList()
			},
			async getWaitList() {

				const res = await Mission.getTaskList(this.info)
				this.waitList = res.data.list
				console.log(res, 'res1')
			},
			async getEndList() {
				const res = await Mission.getTaskList(this.endInfo)
				if (res.data.list.length === this.endInfo.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = res.data.list
				console.log(res, 'res2')
			},
			open(id, name, state,st) {
				uni.navigateTo({
					url: `/pages/mission/myTask/myTaskList?id=${id}&name=${name}&stste=${state}&st=${st}`,
				});
			},
			async init() {
				
				const res = await Mission.getTaskChart()
				this.securityAlarm.data[0].num = res.data.pie.end
				this.securityAlarm.data[1].num = res.data.pie.not
				this.trafficAnomaly.data = res.data.line
				this.total = res.data.total
				this.rate = res.data.pie.rate
				console.log(res, 'res')
				this.hackReset = false
				this.$nextTick(() => {
					this.hackReset = true
				})
				console.log(this.securityAlarm, 'this.securityAlarm')
			}
		},
		async onShow() {
			this.endInfo.page = 1
			uni.pageScrollTo({
						    scrollTop: 0,
						});
			await this.init()
			await this.getWaitList()
			await this.getEndList()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	::v-deep .uni-collapse-item__title-box {
		padding: 0;
	}

	::v-deep .uni-collapse-item__wrap.is--transition {
		padding-left: 30rpx;
	}

	.popupShow {
		// top: 100rpx;
		box-sizing: border-box;
		overflow: hidden;
		// position: fixed;
		height: 100vh;
		width: 100%;
	}

	.section-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx dashed #E5E5E5;

		.left {
			font-size: 30rpx;
			color: #000623;

			.name {
				width: 620rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 20rpx;
			}

			.left_text {
				display: flex;
				align-items: center;
				
				color: #A0A7B8;
				font-size: 26rpx;
			}
		}

		image {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.center {
		padding: 32rpx;

		.popup-card {
			position: relative;
			box-sizing: border-box;
			width: 624rpx;
			height: 708rpx;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			padding: 32rpx;

			.close {
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				top: 32rpx;
				right: 24rpx;
			}

			.popup-title {
				display: flex;
				justify-content: space-between;
				padding-right: 30rpx;
				align-items: center;

				.popup-image {
					width: 100rpx;
					height: 88rpx;
				}
			}

			.list {
				height: 550rpx;
				// width: 500rpx;
				// overflow: scroll;
				overflow: auto;
				// overflow-y:hidden;
			}
		}

		.number {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 400;
			color: #000623;
			margin-bottom: 20rpx;

			text {
				font-size: 26rpx;
				color: #8890A5;
				margin-left: 10rpx;
			}
		}

		.chart {
			width: 628rpx;
			height: 340rpx;
			box-sizing: border-box;
			margin-bottom: 50rpx;
		}

		.chart2 {
			width: 628rpx;
			height: 440rpx;
			box-sizing: border-box;
			margin-bottom: 50rpx;
		}

		.card {
			display: flex;
			padding: 40rpx 0;
			border-bottom: 4rpx dashed #E5E5E5;
			font-size: 26rpx;
			color: #A0A7B8;

			.title {
				display: flex;
				color: #000623;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}

			.time {
				margin-left: 20rpx;
			}

			.point {
				margin: 12rpx 20rpx 0 0;
				width: 16rpx;
				height: 16rpx;
				border-radius: 8rpx;
				background-color: #FCB94F;
			}

			.color {
				background-color: #48BC7C !important;
			}


			// &:nth-last-child(1) {
			// 	border-bottom: none;
			// }
		}
	}

	.date {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 220rpx;
		height: 56rpx;
		border: 2rpx solid #A0A7B8;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
		color: #999;

		.date-img {
			width: 34rpx !important;
			height: 34rpx !important;
			margin: 0 !important;
			transform: rotate(90deg)
		}
	}
</style>
